/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component} from 'react';
import { Form, Input, DatePicker,  message ,  Button } from 'antd';
import {connect} from 'dva';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import { Vector } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import Feature from 'ol/Feature';
import { Icon, Stroke, Style } from 'ol/style';
import Point from 'ol/geom/Point';
import { fromLonLat, toLonLat } from 'ol/proj';
import request from '@/utils/request';
import yali from './../../images/yali_blue.png';
import axios from 'axios';
import GeoJSON from 'ol/format/GeoJSON';
const FormItem = Form.Item;
class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      all_vendors:[],
      all_protocols:[],
      layers: [
        new TileLayer({
          title: '天地图卫星影像',
          visible: true,
          source: new XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63',
          }),
        }),
        new TileLayer({
          title: '天地图路网',
          visible: false,
          source: new XYZ({
            url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63',
          }),
        }),
        new TileLayer({
          title: '天地图文字标注',
          source: new XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=49ea1deec0ffd88ef13a3f69987e9a63',
          }),
        }),

      ],
      point:[],
      pipeData:{}
    };
  }
  getMarker=()=>{
    return this.state.point
  }
  componentDidMount() {
    if (this.props.findChildFunc) {
      this.props.findChildFunc(this.getMarker);
    }

    const that=this;
    let map = this.map = new Map({
      target: 'press_sensor_map',
      layers: this.state.layers,
      view: new View({
        center: this.props.editRecord?fromLonLat([this.props.editRecord.longitude,this.props.editRecord.latitude]):fromLonLat([89.176282, 42.948544]),//经纬度
        zoom: 15,
        maxZoom: 18,
        minZoom: 13,
      }),
    });
    let pointerLayer=null;
    if(this.props.editRecord){
      this.setState({
        point:[this.props.editRecord.longitude,this.props.editRecord.latitude]
      },function() {
        let mockvectorSource=that.createApoint(fromLonLat(this.state.point))
        // 创建标注图层
        pointerLayer = new Vector({
          source: mockvectorSource,
          zIndex: 12,
        });
        // 将标注图层添加到地图上
        map.addLayer(pointerLayer);
      })
    }
    map.on('click', function(e) {
      //在点击时获取像素区域;
      console.log(toLonLat(e.coordinate));
      that.setState({
        point:toLonLat(e.coordinate)
      })
      if(pointerLayer){
        map.removeLayer(pointerLayer)
      }
      let mockvectorSource=that.createApoint(e.coordinate)
      // 创建标注图层
      pointerLayer = new Vector({
        zIndex: 12,
        source: mockvectorSource,
      });
      // 将标注图层添加到地图上
      map.addLayer(pointerLayer);
    })



    axios(`http://test.zhsgy.top:7405/geoserver/tulufan/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=tulufan%3Anewpipeline&outputFormat=application%2Fjson`, {
      method:'GET',
    })
      .then(response => {
        console.log('response',response)
        let designPipeVectorSource = this.designPipeVectorSource = new VectorSource({
          features: (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(response.data),
        });
        console.log('designPipeVectorSource',designPipeVectorSource)
        let designPipeVectorLayer = this.designPipeVectorLayer = new Vector({
          source: designPipeVectorSource,
          zIndex: 10,
          style: new Style({
            stroke: new Stroke({
              color: 'rgb(39,226,83)',
              width: 2,

            }),
          }),
        });
        this.map.addLayer(designPipeVectorLayer);
      })


  }
  createApoint=(coordinate)=>{
    let point = new Feature({
      geometry: new Point(coordinate),
      name: '压力传感器',
    });
    //设置图标的样式
    point.setStyle(new Style({
      /**{olx.style.IconOptions}类型*/
      image: new Icon({
        anchorOrigin: 'top-right',
        offsetOrigin: 'top-right',
        src: yali,
      })
    }));

    // 创建标注的数据源
    let mockvectorSource = new VectorSource({
      features: [point],
    });
    return mockvectorSource
  }
  render() {
    const formItemLayoutWithLabel = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 5},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 19},
      }
    };
    console.log(this.state.point)
    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <Form onSubmit={this.handleSubmit}>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               压力传感器名称
            </span>
            )}
          >
            {getFieldDecorator('name', {
              initialValue: this.props.editRecord ? this.props.editRecord.name : '',
              rules: [{ required: true, message: '请输入名称' }],
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               IMEI
            </span>
            )}
          >
            {getFieldDecorator('imei', {
              initialValue: this.props.editRecord ? this.props.editRecord.imei : '',
              rules: [{ required: true, message: '请输入IMEI' }],
            })(
              <Input disabled={Boolean(this.props.editRecord)} />
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               IMSI
            </span>
            )}
          >
            {getFieldDecorator('imsi', {
              initialValue: this.props.editRecord ? this.props.editRecord.imsi : '',
              rules: [{ required: true, message: '请输入IMSI' }],
            })(
              <Input disabled={Boolean(this.props.editRecord)}/>
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               安装地址
            </span>
            )}
          >
            {getFieldDecorator('address', {
              initialValue: this.props.editRecord ? this.props.editRecord.address: '',
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               描述
            </span>
            )}
          >
            {getFieldDecorator('description', {
              initialValue: this.props.editRecord ? this.props.editRecord.description: '',
            })(
              <Input />
            )}
          </FormItem>
          <FormItem
            {...formItemLayoutWithLabel}
            label={(
              <span>
               地图
            </span>
            )}
          >
            <div id="press_sensor_map" style={{width:'100%',height:'400px'}}></div>
          </FormItem>
        </Form>
        <div
          style={{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }}
        >
          <Button onClick={this.props.onClose} style={{ marginRight: 8 }}>
            取消
          </Button>
          <Button onClick={()=>{
            if(this.state.point.length===0){
              message.error('请在地图上选择一个点')
              return
            }
            this.props.onSave()
          }} type="primary">
            确定
          </Button>
        </div>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);


